<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/animate.min.css">
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/video-js.css">
  <link rel="stylesheet" href="css/font.css">
  <link rel="stylesheet" href="css/index.css">
  <script src="js/flexible.js"></script>
</head>
<body>
  <div id="app">
    <!-- edu-header -->
    <div class="edu-header">
      <div class="edu-header-info">
        <div class="weather">
          <div class="weather-text">晴转多云 20/11</div>
          <div class="weather-ico"></div>
        </div>
        <div class="date">10月20日 周五 农历九月初一</div>
      </div>
    </div>
    <!-- /edu-header -->
    <!-- edu-main -->
    <div class="edu-main header-through nav-through">
      <div class="edu-carousel">
        <div class="swiper-container" id='record-focus'>
          <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/carousel-temp-1.jpg"></div>
            <div class="swiper-slide"><img src="img/carousel-temp-2.jpg"></div>
            <div class="swiper-slide"><img src="img/carousel-temp-3.jpg"></div>
            <div class="swiper-slide"><img src="img/carousel-temp-4.jpg"></div>
            <div class="swiper-slide"><img src="img/carousel-temp-5.jpg"></div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <div class="edu-searchbar">
        <div class="edu-searchbar-inner">
          <input type="text" class="edu-searchbar-control" autocomplete="off">
          <button class="edu-searchbar-ico"></button>
        </div>
      </div>
      <div class="edu-vessel">
        <div class="edu-vessel-inner">
          <div class="edu-title">搜索结果<i>搜索结果</i></div>
          <div class="swiper-container has-progress-swiper" id='record-list-result'>
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="edu-thumbnail-wrap">
                  <div class="edu-thumbnail" data-video-id='1'>
                    <div class="edu-thumbnail-preview">
                      <div class="edu-thumbnail-preview-inner">
                        <img src="./img/media-temp.png">
                      </div>
                    </div>
                    <h4>宝迪英语学堂</h4>
                  </div>
                  <div class="edu-thumbnail" data-video-id='1'>
                    <div class="edu-thumbnail-preview">
                      <div class="edu-thumbnail-preview-inner">
                        <img src="./img/media-temp.png">
                      </div>
                    </div>
                    <h4>宝迪英语学堂</h4>
                  </div>
                  <div class="edu-thumbnail" data-video-id='1'>
                    <div class="edu-thumbnail-preview">
                      <div class="edu-thumbnail-preview-inner">
                        <img src="./img/media-temp.png">
                      </div>
                    </div>
                    <h4>宝迪英语学堂</h4>
                  </div>
                  <div class="edu-thumbnail" data-video-id='1'>
                    <div class="edu-thumbnail-preview">
                      <div class="edu-thumbnail-preview-inner">
                        <img src="./img/media-temp.png">
                      </div>
                    </div>
                    <h4>宝迪英语学堂</h4>
                  </div>
                  <div class="edu-thumbnail" data-video-id='1'>
                    <div class="edu-thumbnail-preview">
                      <div class="edu-thumbnail-preview-inner">
                        <img src="./img/media-temp.png">
                      </div>
                    </div>
                    <h4>宝迪英语学堂</h4>
                  </div>
                  <div class="edu-thumbnail" data-video-id='1'>
                    <div class="edu-thumbnail-preview">
                      <div class="edu-thumbnail-preview-inner">
                        <img src="./img/media-temp.png">
                      </div>
                    </div>
                    <h4>宝迪英语学堂</h4>
                  </div>
                  <div class="edu-thumbnail" data-video-id='1'>
                    <div class="edu-thumbnail-preview">
                      <div class="edu-thumbnail-preview-inner">
                        <img src="./img/media-temp.png">
                      </div>
                    </div>
                    <h4>宝迪英语学堂</h4>
                  </div>
                  <div class="edu-thumbnail" data-video-id='1'>
                    <div class="edu-thumbnail-preview">
                      <div class="edu-thumbnail-preview-inner">
                        <img src="./img/media-temp.png">
                      </div>
                    </div>
                    <h4>宝迪英语学堂</h4>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="edu-thumbnail-wrap">
                  <div class="edu-thumbnail" data-video-id='1'>
                    <div class="edu-thumbnail-preview">
                      <div class="edu-thumbnail-preview-inner">
                        <img src="./img/media-temp.png">
                      </div>
                    </div>
                    <h4>宝迪英语学堂</h4>
                  </div>
                  <div class="edu-thumbnail" data-video-id='1'>
                    <div class="edu-thumbnail-preview">
                      <div class="edu-thumbnail-preview-inner">
                        <img src="./img/media-temp.png">
                      </div>
                    </div>
                    <h4>宝迪英语学堂</h4>
                  </div>
                  <div class="edu-thumbnail" data-video-id='1'>
                    <div class="edu-thumbnail-preview">
                      <div class="edu-thumbnail-preview-inner">
                        <img src="./img/media-temp.png">
                      </div>
                    </div>
                    <h4>宝迪英语学堂</h4>
                  </div>
                  <div class="edu-thumbnail" data-video-id='1'>
                    <div class="edu-thumbnail-preview">
                      <div class="edu-thumbnail-preview-inner">
                        <img src="./img/media-temp.png">
                      </div>
                    </div>
                    <h4>宝迪英语学堂</h4>
                  </div>
                  <div class="edu-thumbnail" data-video-id='1'>
                    <div class="edu-thumbnail-preview">
                      <div class="edu-thumbnail-preview-inner">
                        <img src="./img/media-temp.png">
                      </div>
                    </div>
                    <h4>宝迪英语学堂</h4>
                  </div>
                  <div class="edu-thumbnail" data-video-id='1'>
                    <div class="edu-thumbnail-preview">
                      <div class="edu-thumbnail-preview-inner">
                        <img src="./img/media-temp.png">
                      </div>
                    </div>
                    <h4>宝迪英语学堂</h4>
                  </div>
                  <div class="edu-thumbnail" data-video-id='1'>
                    <div class="edu-thumbnail-preview">
                      <div class="edu-thumbnail-preview-inner">
                        <img src="./img/media-temp.png">
                      </div>
                    </div>
                    <h4>宝迪英语学堂</h4>
                  </div>
                  <div class="edu-thumbnail" data-video-id='1'>
                    <div class="edu-thumbnail-preview">
                      <div class="edu-thumbnail-preview-inner">
                        <img src="./img/media-temp.png">
                      </div>
                    </div>
                    <h4>宝迪英语学堂</h4>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-scrollbar edu-scrollbar"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- /edu-main -->
    <!-- edu-nav -->
    <div class="edu-nav">
      <a href="index.html" class="edu-nav-link">首页<i>首页</i></a>
      <a href="news.html" class="edu-nav-link">新闻<i>新闻</i></a>
      <a href="video.html" class="edu-nav-link active">视频<i>视频</i></a>
      <a href="record.html" class="edu-nav-link">记录<i>记录</i></a>
      <a href="#" class="edu-nav-link back">返回<i>返回</i></a>
    </div>
    <!-- /edu-nav -->
  </div>
  <!-- <div style="top: 12.7314814815rem;" class="active record-list-result-prev swiper-button-prev edu-prev"></div> -->
  <!-- <div style="top: 12.7314814815rem;" class="active record-list-result-next swiper-button-next edu-next"></div> -->
</body>
<script src="js/jquery.min.js"></script>
<script src="js/underscore-min.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/video.min.js"></script>
<script>
  
  // 焦点图
  var focus = new Swiper('#record-focus', {
    loop: true,
    autoplay: {
      delay: 5000,
      disableOnInteraction: false
    },
    pagination: {
      el: '#record-focus .swiper-pagination',
      clickable: true
    }
  })
  
  hasProgressSwiper('#record-list-result', {allowTouchMove: false})

  // 有进度条的swiper
  function hasProgressSwiper(el, config) {
    return new Swiper(el, $.extend({
      navigation: {
        nextEl: el.replace('#', '.') + '-next',
        prevEl: el.replace('#', '.') + '-prev'
      },
      scrollbar: {
        el: el + ' .swiper-scrollbar',
        draggable: true
      },
      on: {
        init: function() {
          setTimeout(() => {
            $('<div class="edu-scrollbar-indicator">' + (this.activeIndex + 1 + '\/' + this.slides.length) + '</div>').appendTo($(this.$el).find('.swiper-scrollbar-drag'))
          }, 0)
        },
        slideChange: function() {
          this.$el.find('.edu-scrollbar-indicator').text(this.activeIndex + 1 + '\/' + this.slides.length)
        }
      }
    }, config || {}))
  }

  // 底部菜单返回按钮
  $(document).on('click', '.edu-nav-link.back', function(e) {
    if ($('.edu-news-detail,.edu-video-detail').hasClass('active')) { // 如果有详情页打开则关闭详情页
      $(that.el.closest).removeClass('active')
      $(that.el.router).css('visibility', 'visible')
    } else if (window.recordList.activeIndex === 1) { // 如果正在记录结果页，则跳回到记录搜索页
      window.recordList.slideTo(0)
    } else { // 路由返回
      history.back()
    }
  })
  
  // 底部菜单返回按钮
  $(document).on('click', '.edu-nav-link.back', function(e) {
    if ($('.edu-news-detail,.edu-video-detail').hasClass('active')) { // 如果有详情页打开则关闭详情页
      $(that.el.closest).removeClass('active')
      $(that.el.router).css('visibility', 'visible')
    } else if (window.videoList.activeIndex === 1) { // 如果正在视频结果页，则跳回到视频搜索页
      window.videoList.slideTo(0)
    } else { // 路由返回
      history.back()
    }
  })
  
</script>
</html>